<template>
    <div class="achievement-list-page">
        <el-card shadow="never" class="mt-4">
            <el-form class="filter" :inline="true" @keyup.enter.native="onSubmit">
                <el-form-item label="企业" v-if="!isCompanyAccount()">
                    <el-select
                        v-model="form.companyId"
                        clearable
                        @change="onSubmit()">
                        <el-option
                            v-for="item in companyOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="团队" v-if="isCompanyAccount()">
                    <el-select
                        v-model="form.teamId"
                        clearable
                        @change="onSubmit()">
                        <el-option
                            v-for="item in teamOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位">
                    <el-select
                        v-model="form.positionId"
                        clearable
                        @change="fetchData()">
                        <el-option
                            v-for="item in positionOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键词" prop="keyword">
                    <el-input
                    v-model="form.keyword"
                    placeholder="企业名/员工姓名/邮箱搜索"
                    class="input-width"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" @click="resetForm">重置</el-button>
                <el-button type="primary" @click="onExport">导出</el-button>
            </el-form>
            <div class="mt-3" v-loading="loading">
                <el-table :data="data">
                    <el-table-column type="index"
                    :index="indexMethod"
                    align="center"
                    label="序号"
                    width="50"/>
                    <el-table-column label="姓名" prop="name" width="70"></el-table-column>
                    <el-table-column label="职位" prop="position"></el-table-column>
                    <el-table-column label="团队" prop="team"></el-table-column>
                    <el-table-column label="企业" prop="company" v-if="!isCompanyAccount()"/>
                    <el-table-column label="首次学习时间">
                        <template slot-scope="{row}">
                            {{ formatTime(row.first_learn_at) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="最长单天学习时长">
                        <template slot-scope="{row}">
                            {{ Math.floor(row.max_learn / 60) + "分钟"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="累积学习时长">
                        <template slot-scope="{row}">
                            {{ Math.floor(row.learn_total / 60) + "分钟"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="{row}">
                            <el-button
                                type="text"
                                @click="onViewClick(row)">学习统计</el-button>
                            <!--<el-button
                                type="text"
                                @click="onEditClick(row)">详情</el-button>-->
                            <el-button
                                type="text"
                                @click="onExportClick(row)">导出</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer">
                <pagination
                ref="pagination"
                :currentPage="form.page"
                :pageSize="form.size"
                :handleCurrentChange="onCurrentChange"
                :handlePageSizeChange="onPageSizeChange"
                :totalElements="totalElements"
                ></pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Pagination from '../../../components/base/Pagination';
import TimeFormats from '../../../helpers/TimeFormats';
import IndexNumber from '../../../helpers/IndexNumber';

export default {
    components: {
        Pagination,
    },
    mixins: [require('../../../mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 50,
                keyword: '',
                teamId: '',
                companyId: '',
                positionId: '',
            },
            accountInfo: '',
            totalElements: 0,
            teamOptions: [],
            companyOptions: [],
            positionOptions: [],
        };
    },
    methods: {
        formatTime(timestamp, format) {
            return timestamp && timestamp > 0 ? new TimeFormats().convertTime(format, timestamp) : '';
        },
        isCompanyAccount() {
            return this.$store.state.my.company_id > 0;
        },
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
        },
        onCurrentChange(val) {
            this.form.page = val;
            this.fetchData();
        },
        onPageSizeChange(val) {
            this.form.size = val;
            this.form.page = 1;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('user', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onEditClick({id}) {
            if (this.isCompanyAccount()) {
                this.$router.push({
                    name: 'UserReportManage.Detail',
                    params: { id: id },
                });
            } else {
                this.$router.push({
                    name: 'UserStatisticsManage.Detail',
                    params: { id: id },
                });
            }
        },
        fetchTeam() {
            API.get('role/list', {
                params: {
                    type: 3,
                },
            }).then((res) => {
                this.teamOptions = res;
            });
        },
        fetchPosition() {
            API.get('position/list').then((res) => {
                this.positionOptions = res;
            });
        },
        onAccountClick({id}) {
            this.$router.push({
                name: 'UserManage.Account',
                params: { id: id },
            });
        },
        resetForm() {
            this.form.keyword = '';
            this.form.teamId = '';
            this.form.positionId = '';
            this.form.companyId = '';
            this.onSubmit();
        },
        fetchAccountInfo() {
            API.get('company/account').then((res) => {
                this.accountInfo = res;
            });
        },
        fetchCompany() {
            API.get('company/list').then((res) => {
                this.companyOptions = res;
            });
        },
        indexMethod(index) {
            return new IndexNumber()
                .getIndex(this.totalElements, this.form.page, this.form.size, index);
        },
        onExportClick({id}) {
            const url = 'statistics/export';
            const query = `/user/${id}`;
            window.location.href = `${process.env.VUE_APP_API_PREFIX}${url}${query}`;
        },
        onExport() {
            const url = 'user/export';
            let query = '';
            for (const key in this.form) {
                if (key) {
                    query += `${key}=${this.form[key]}&`;
                }
            }
            window.location.href = `${process.env.VUE_APP_API_PREFIX}${url}?${query}`;
        },
        onViewClick(row) {
            const newPage = this.$router.resolve({
                name: 'Staff.Home.V2',
                params: {
                    v: 'v2',
                    id: row.id || '',
                },
            });

            // 打开新页面
            window.open(newPage.href, '_self');
        },
    },
    mounted() {
        this.fetchData();
        this.fetchTeam();
        this.fetchPosition();
        if (!this.isCompanyAccount()) {
            this.fetchCompany();
        }
    },
};
</script>

<style lang="scss">
.achievement-list-page {
    .filter {
        .input-width {
            width: 200px;
        }
    }
    .logo {
        width: 60px;
        height: 60px;
    }
    .footer {
        height: 44px;
        background: #f7f7f7;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
        color: #909399;
    }
}
</style>
